<template>
  <el-select class="input-class" v-model="nowValue" placeholder="请选择" @change="(e)=> this.$emit('input',e)">
    <el-option
      v-for="user in users"
      :key="user.userId"
      :label="user.userName"
      :value="user.userId">
      <span style="float: left"><user-and-avatar :user-id="user.userId"></user-and-avatar></span>
    </el-option>
  </el-select>
</template>

<script>
import UserAndAvatar from "@/components/UserAndAvatar/index.vue";
import {listAllProjectUserAssignment} from "@/api/projectUser/userProjectUserAssignment";

export default {
  name: "ProjectMember",
  components: {UserAndAvatar},
  data() {
    return {
      nowValue: null,
      users: []
    }
  },
  props: {
    value: [String, Number], // 当前选中的值
    projectId: [String, Number], // 项目id
  },
  watch: {
    value() {
      this.nowValue = this.value
    },
    projectId() {
      this.getData()
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.nowValue = this.value
      if (this.projectId == null || this.projectId === "") return
      listAllProjectUserAssignment(this.projectId).then(({data}) => {
        this.users = data
      })
    }
  }

}
</script>

<style scoped lang="scss">

</style>
